<template>
  <div class="page-card handle-event">
    <!-- <h-query :showKey="['title']" @search="search">

    </h-query> -->
    <a-button type="primary" style="margin: 0 0 20px 0" @click.stop="add">添加指令</a-button>
    <div>
      <a-tabs v-model="tab" @change="refresh">
        <a-tab-pane key="1" tab="待发布指令">
          <template v-if="list.length">
            <a-card v-for="item in list" :key="item.id" style="margin-bottom: 12px">
              <div class="plane-each" >
                <div>
                  <h1>指令名称</h1>
                  <p>{{ item.title }}</p>
                </div>
                <div style="max-width: 50%">
                  <h1>指令内容</h1>
                  <p >{{ item.orderContent }}</p>
                </div>
                <div>
                  <h1>指令发送周期</h1>
                  <p class="blue">{{ (item.sendCycle / 60).toFixed(2) }}小时</p>
                </div>
                <!-- <div>
                  <h1>指令执行时间</h1>
                  <p class="blue">{{ item.sendTime }}</p>
                </div> -->

                <div class="plane-action">
                  <a-button type="primary" @click="edit(item)">编辑指令</a-button> <br>
                  <!-- <a-button type="success" @click="updateOrderPlanStatus(item, 1)">发布指令</a-button> <br> -->
                  <a-button type="danger" @click="updateOrderPlanStatus(item, 1, '运行计划')">运行计划</a-button>
                </div>
              </div>
            </a-card>
          </template>
          <a-empty v-else></a-empty>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已发布指令">
          <template v-if="listIn.length">
            <a-card v-for="item in listIn" :key="item.id" style="margin-bottom: 12px">
              <div class="plane-each" >
                <div>
                  <h1>指令名称</h1>
                  <p>{{ item.title }}</p>
                </div>
                <div style="max-width: 50%">
                  <h1>指令内容</h1>
                  <p class="ellipsis-2">{{ item.orderContent }}</p>
                </div>
                <div>
                  <h1>指令发送周期</h1>
                  <p class="blue">{{ (item.sendCycle / 60).toFixed(2) }}小时</p>
                </div>
                <div>
                  <h1>指令执行时间</h1>
                  <p class="blue">{{ item.sendTime }}</p>
                </div>
                <div>
                  <h1>已发送次数</h1>
                  <p class="blue">{{ item.sendNum }}</p>
                </div>

                <div class="plane-action">
                  <a-button type="danger" @click="updateOrderPlanStatus(item, 0, '结束指令')">结束指令</a-button> <br>
                  <!-- <a-button type="success" @click="updateOrderPlanStatus(item, 1)">发布指令</a-button> <br> -->
                  <!-- <a-button type="danger" @click="updateOrderPlanStatus(item, 1, '运行计划')">运行计划</a-button> -->
                </div>
              </div>
            </a-card>
          </template>
          <a-empty v-else></a-empty>
        </a-tab-pane>
      </a-tabs>
    </div>

    <createPlane ref="createPlane" v-model="show" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import createPlane from './action/createPlane';
import { getOrderPlanClose, getOrderPlanOpen, updateOrderPlanStatus } from '@/api/serve';

export default {
  inject: ['setTitle'],
  components: {
    SvgIcon,
    createPlane
  },
  data() {
    return {
      tab: '1',

      show: false,
      current: 1,

      list: [],
      listIn: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      componey: [],
      id: ''
    };
  },
  beforeCreate() {

  },
  created() {
    this.id = this.$route.query.id;
    this.setTitle();
    this.$route.meta.title = this.$route.query.title && (this.$route.query.title.substring(0, 24) + '...');
    this.refresh();
  },
  methods: {
    refresh() {
      this.getList();
      this.getListIn();
    },
    submit() {
      this.show = false;
      this.refresh();
    },
    add() {
      this.show = true;
      this.$refs.createPlane.add(this.id);
    },
    edit(record) {
      this.show = true;
      this.$refs.createPlane.edit(record);
    },
    getList() {
      getOrderPlanClose({
        eventId: this.id
      }).then(res => {
        this.list = res.data;
      });
    },
    getListIn() {
      getOrderPlanOpen({
        eventId: this.id
      }).then(res => {
        this.listIn = res.data;
      });
    },
    updateOrderPlanStatus({ id }, status, label) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: `确定要${label}吗？`,
        onOk() {
          updateOrderPlanStatus({
            id,
            status
          }).then(res => {
            that.$message.success(res.msg);
            that.refresh();
          });
        }
      });
    }

  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .plane-each {
    display: flex;
    position: relative;
    width: 100%;
    .plane-action{
      position: absolute;
      right: 0;
      top: -8px;
      margin-right: 0 !important;
      >button {
        margin-bottom: 10px;
      }
    }
    >div {
      margin-right: 5%;
      &:first-child {
        width: 12%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:nth-child(3) {
        width: 10%;
      }
      &:nth-child(3) {
        width: 10%;
      }
    }
    h1 {
      font-size: 14px;
      font-weight: 400;
      color: #91929E;
    }
    p {
      font-size: 16px;
      font-weight: 400;
      color: #0A1629;
      line-height: 24px;
      margin-top: 12px;
      &.blue {
        color: #1F3B8A;
      }
    }
  }
</style>
